<template>
  <div id="app">
    <div class=row>
      <vd-button>主要按钮：primary</vd-button>
      <vd-button type="primary" icon="vd-icon-biaoqian">按钮</vd-button>
      <vd-button type="primary" round>按钮圆角</vd-button>
      <vd-button type="primary" disabled>按钮禁用</vd-button>
      <vd-button type="primary" plain>朴素按钮</vd-button>
      <vd-button type="primary" plain round>朴素按钮圆角</vd-button>
      <vd-button type="primary" plain disabled>朴素按钮禁用</vd-button>
    </div>
    <div class=row>
      <vd-button>成功按钮：success</vd-button>
      <vd-button type="success">按钮</vd-button>
      <vd-button type="success" round>按钮圆角</vd-button>
      <vd-button type="success" disabled>按钮禁用</vd-button>
      <vd-button type="success" plain>朴素按钮</vd-button>
      <vd-button type="success" plain round>朴素按钮圆角</vd-button>
      <vd-button type="success" plain disabled>朴素按钮禁用</vd-button>
    </div>
    <div class=row>
      <vd-button>信息按钮：info</vd-button>
      <vd-button type="info">按钮</vd-button>
      <vd-button type="info" round>按钮圆角</vd-button>
      <vd-button type="info" disabled>按钮禁用</vd-button>
      <vd-button type="info" plain>朴素按钮</vd-button>
      <vd-button type="info" plain round>朴素按钮圆角</vd-button>
      <vd-button type="info" plain disabled>朴素按钮禁用</vd-button>
    </div>
    <div class=row>
      <vd-button>警告按钮：warning</vd-button>
      <vd-button type="warning">按钮</vd-button>
      <vd-button type="warning" round>按钮圆角</vd-button>
      <vd-button type="warning" disabled>按钮禁用</vd-button>
      <vd-button type="warning" plain>朴素按钮</vd-button>
      <vd-button type="warning" plain round>朴素按钮圆角</vd-button>
      <vd-button type="warning" plain disabled>朴素按钮禁用</vd-button>
    </div>
    <div class=row>
      <vd-button>危险按钮：danger</vd-button>
      <vd-button type="danger">按钮</vd-button>
      <vd-button type="danger" round>按钮圆角</vd-button>
      <vd-button type="danger" disabled>按钮禁用</vd-button>
      <vd-button type="danger" plain>朴素按钮</vd-button>
      <vd-button type="danger" plain round>朴素按钮圆角</vd-button>
      <vd-button type="danger" plain disabled>朴素按钮禁用</vd-button>
    </div>

    <div class=row>
      <vd-button>圆形primary：</vd-button>
      <vd-button circle icon="vd-icon-biaoqian"></vd-button>
      <vd-button type="primary" circle icon="vd-icon-biaoqian"></vd-button>
      <vd-button type="primary" circle disabled icon="vd-icon-biaoqian"></vd-button>
      <vd-button type="primary" circle plain icon="vd-icon-biaoqian"></vd-button>
      <vd-button type="primary" circle plain disabled icon="vd-icon-biaoqian"></vd-button>
    </div>
    <div class="row">
      <vd-button>圆形success：</vd-button>
      <vd-button type="success" circle>11</vd-button>
      <vd-button type="success" circle disabled>11</vd-button>
      <vd-button type="success" circle plain>11</vd-button>
      <vd-button type="success" circle plain disabled>11</vd-button>
    </div>
    <div class="row">
      <vd-button>圆形primary：</vd-button>
      <vd-button type="warning" circle>11</vd-button>
      <vd-button type="warning" circle disabled>11</vd-button>
      <vd-button type="warning" circle plain>11</vd-button>
      <vd-button type="warning" circle plain disabled>11</vd-button>
    </div>
    <div class="row">
      <vd-button>圆形danger：</vd-button>
      <vd-button type="danger" circle>11</vd-button>
      <vd-button type="danger" circle disabled>11</vd-button>
      <vd-button type="danger" circle plain>11</vd-button>
      <vd-button type="danger" circle plain disabled>11</vd-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
  .row{
    text-align: left;
    margin: 40px 50px;
    button{margin: 0 20px;}
  }
</style>
